import React, { Component } from 'react';
import { View, ListView, Text, TouchableOpacity, StyleSheet, Button } from 'react-native';

import { NavigationActions } from 'react-navigation';
/**
 * 注意：RN的Listview就是一个ScrollView
 */
const items = [
  {
    title: 'Simple List',
    detail: '单行列表，无分组'
  },
  {
    title: 'Grid Layout',
    detail: '网格列表'
  },
  {
    title: 'AutoGridLayoutScreen',
    detail: '自己计算宽度的GridLayout'
  },
  {
    title: 'Section List 1',
    detail: '分组列表，嵌套View实现网格'
  },
  {
    title: 'Section List 2',
    detail: '分组列表，嵌套ListView实现网格'
  },
];

export default class RootScene extends Component {

  constructor(props) {
    super(props);
    let ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: ds.cloneWithRows(items)
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
        />
      </View>
    )
  }

  _renderRow = (rowData, sectionId, rowId) => {
    let rowIndex = Number(rowId);
    return (
      <TouchableOpacity style={styles.cellContainer} onPress={() => {
        this.itemPressed(rowIndex);
      }}>
        <Text style={styles.titleLabel}>{rowData.title}</Text>
        <Text style={styles.detailLabel}>{rowData.detail}</Text>
      </TouchableOpacity>
    )
  };

  itemPressed(index: Number) {
    console.log("index: " + index);
    switch (index) {
      case 0:
        this.props.navigation.navigate('SimpleListScreen');
        break;
      case 1:
        this.props.navigation.navigate('GridLayoutScreen');
        break;
      case 2:
        this.props.navigation.navigate('AutoGridLayoutScreen');
        break;
      case 3:
        this.props.navigation.navigate('SectionListScreen');
        break;
      case 4:
        this.props.navigation.navigate('GroupListScreen');
        break;
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cellContainer: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#dcdcdc'
  },
  titleLabel: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  detailLabel: {
    fontSize: 13,
    color: '#999999',
    marginTop: 10,
  },

});